<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <title>编辑学生</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../../static/layuimini/lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../static/layuimini/css/public.css" media="all">
    <style>
        .layui-form-item .layui-input-company {
            width: auto;
            padding-right: 10px;
            line-height: 38px;
        }
    </style>

    <script src="../../../static/layuimini/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
    <script src="../../../static/layuimini/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
    <script src1="http://local.res.layui.com/layui/release/laydate/dist/laydate.js" charset="utf-8"></script>

    <script type="text/javascript" charset="UTF-8">
        function getQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
            var r = decodeURI(window.location.search.substr(1).match(reg));
            var arr = r.split(",");
            if (r != null) return arr[2];
            return null;
        }
    </script>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <div class="layui-form layuimini-form" lay-filter="first">
            <div class="layui-form-item">
                <label class="layui-form-label required">学号</label>
                <div class="layui-input-block">
                    <input type="text" name="studentId" lay-verify="required" lay-reqtext="姓名不能为空" placeholder="请输入姓名"
                           value="" class="layui-input" id="studentId">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">姓名</label>
                <div class="layui-input-block">
                    <input type="text" name="studentName" lay-verify="required" lay-reqtext="姓名不能为空" placeholder="请输入姓名"
                           value="" class="layui-input" id="studentName">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">手机</label>
                <div class="layui-input-block">
                    <input type="tel" name="phone" lay-verify="required" lay-reqtext="手机不能为空" placeholder="请输入手机"
                           value="" class="layui-input" id="phone">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">系别</label>
                <div class="layui-input-block">
                    <select name="department" lay-verify="required" lay-verType="tips" lay-filter="department"
                            id="department">
                        <option value="">请选择系别</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">专业</label>
                <div class="layui-input-block">
                    <select name="major" lay-verify="required" lay-verType="tips" lay-filter="major" id="major">
                        <option value="">请选择专业</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">年级</label>
                <div class="layui-input-block">
                    <select name="grade" lay-verify="required" lay-verType="tips" lay-filter="grade" id="grade">
                        <option value="">请选择年级</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">班级</label>
                <div class="layui-input-block">
                    <select name="class" lay-verify="required" lay-verType="tips" lay-filter="class" id="class">
                        <option value="">请选择班级</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">生日</label>
                <div class="layui-input-block">
                    <input type="text" name="birthday" class="layui-input" id="birthday" placeholder="请选择生日">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-block">
                    <input type="email" name="email" placeholder="请输入邮箱" value="" class="layui-input" id="email">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">地址</label>
                <div class="layui-input-block" id="area-picker">
                    <div class="layui-input-inline" style="width: 150px;">
                        <select name="province" class="province-selector" data-value="" lay-filter="province-1"
                                id="province">
                            <option value="">请选择省</option>
                        </select>
                    </div>
                    <div class="layui-input-inline" style="width: 150px;">
                        <select name="city" class="city-selector" data-value="" lay-filter="city-1" id="city">
                            <option value="">请选择市</option>
                        </select>
                    </div>
                    <div class="layui-input-inline" style="width: 150px;">
                        <select name="county" class="county-selector" data-value="" lay-filter="county-1" id="district">
                            <option value="">请选择区</option>
                        </select>
                    </div>
                    <div class="layui-input-inline" style="width: 200px;">
                        <input type="text" name="address" placeholder="请输入详细地址" value="" class="layui-input"
                               id="address">
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">保存</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    layui.use(['form', 'miniTab', 'layarea'], function () {
        var form = layui.form,
            layer = layui.layer,
            miniTab = layui.miniTab,
            layarea = layui.layarea,
            $ = layui.jquery;

        var studentId, studentName, department, major, grade, classname, phone, birthday, email, province, city,
            district, address;
        $.ajax({
            async: false,
            url: "/getStudentById",
            data: {
                studentId: getQueryString("studentId")
            },
            type: "get",
            datatype: "json",
            success: function (data) {
                studentId = data.studentId;
                studentName = data.studentName;
                department = data.department;
                major = data.major;
                grade = data.grade;
                classname = data.classname;
                phone = data.phone;
                birthday = data.birthday;
                email = data.email;
                province = data.province;
                city = data.city;
                district = data.district;
                address = data.address;
            }
        });

        //初始化系别信息
        $.ajax({
            async: false,
            url: "/getDepartment",
            type: "get",
            datatype: "json",
            success: function (data) {
                $.each(data, function (index, element) {
                    $("#department").append("<option value='" + element.departmentName + "'> " + element.departmentName + " </option>");
                });
                layui.form.render('select');
            }
        });
        //初始化专业
        $.ajax({
            async: false,
            url: "/getMajorByDepartment",
            type: "get",
            data: {
                departmentName: department
            },
            datatype: "json",
            success: function (data) {
                $("#major").empty();
                $("#major").append(" <option value=''>请选择专业</option>");
                $.each(data, function (index, element) {
                    $("#major").append("<option value='" + element.majorName + "'>" + element.majorName + "</option>");
                });
                layui.form.render('select');
            }
        });
        //初始化年级
        $.ajax({
            async: false,
            url: "/getGradeByMajor",
            type: "get",
            data: {
                majorName: major
            },
            datatype: "json",
            success: function (data) {
                $("#grade").empty();
                $("#grade").append(" <option value=''>请选择年级</option>");
                $.each(data, function (index, element) {
                    $("#grade").append("<option value='" + element.gradeName + "'>" + element.gradeName + "</option>");
                });
                layui.form.render('select');
            }
        });
        //初始化班级
        $.ajax({
            async: false,
            url: "/getClassByGrade",
            type: "get",
            data: {
                gradeName: grade
            },
            datatype: "json",
            success: function (data) {
                $("#class").empty();
                $("#class").append(" <option value=''>请选择班级</option>");
                $.each(data, function (index, element) {
                    $("#class").append("<option value='" + element.className + "'>" + element.className + "</option>");
                });
                layui.form.render('select');
            }
        });
        //级联专业查询
        form.on('select(department)', function (data) {
            console.log('select.department：', this, data);
            let departmentName = $("#department>option:selected").val();
            console.log("departmentName=" + departmentName);
            $.get("/getMajorByDepartment", {departmentName: departmentName}, function (data) {
                $("#grade").empty();
                $("#grade").append("<option value=''>请选择年级</option>");
                $("#class").empty();
                $("#class").append("<option value=''>请选择班级</option>");
                $("#major").empty();
                $("#major").append("<option value=''>请选择专业</option>");
                $.each(data, function (index, element) {
                    $("#major").append("<option value='" + element.majorName + "'>" + element.majorName + "</option>");
                });
                layui.form.render('select');
            }, "json");
        });
        //级联年级查询
        form.on('select(major)', function (data) {
            console.log('select.major：', this, data);
            let majorName = $("#major>option:selected").val();
            console.log("majorName=" + majorName);
            $.get("/getGradeByMajor", {majorName: majorName}, function (data) {
                $("#grade").empty();
                $("#grade").append("<option value=''>请选择年级</option>");
                $.each(data, function (index, element) {
                    $("#grade").append("<option value='" + element.gradeName + "'>" + element.gradeName + "</option>");
                });
                layui.form.render('select');
            }, "json");
        });
        //级联班级查询
        form.on('select(grade)', function (data) {
            console.log('select.grade：', this, data);
            let gradeName = $("#grade>option:selected").val();
            console.log("gradeName=" + gradeName);
            $.get("/getClassByGrade", {gradeName: gradeName}, function (data) {
                $("#class").empty();
                $("#class").append("<option value=''>请选择班级</option>");
                $.each(data, function (index, element) {
                    $("#class").append("<option value='" + element.className + "'>" + element.className + "</option>");
                });
                layui.form.render('select');
            }, "json");
        });

        //回填数据
        form.val('first', {
            'studentId': studentId
            , 'studentName': studentName
            , 'department': department
            , 'major': major
            , 'grade': grade
            , 'class': classname
            , 'phone': phone
            , 'birthday': birthday
            , 'email': email
            , 'address': address
        });

        layarea.render({
            elem: '#area-picker',
            data: {
                province: province,
                city: city,
                county: district,
            },
            change: function (res) {
                //选择结果
                console.log(res);
            }
        });

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            let studentId = $("#studentId").val();
            let studentName = $("#studentName").val();
            let department = $("#department").val();
            let major = $("#major").val();
            let grade = $("#grade").val();
            let classname = $("#class").val();
            let phone = $("#phone").val();
            let birthday = $("#birthday").val();
            let email = $("#email").val();
            let province = $("#province").val();
            let city = $("#city").val();
            let district = $("#district").val();
            let address = $("#address").val();
            $.get("/editStudent", {
                studentId: studentId,
                studentName: studentName,
                department: department,
                major: major,
                grade: grade,
                classname: classname,
                phone: phone,
                birthday: birthday,
                email: email,
                province: province,
                city: city,
                district: district,
                address: address
            }, function (data) {
                if (data == "success") {
                    layer.msg('学生修改成功', {
                        icon: 1,
                        time: 1000, //1秒关闭（如果不配置，默认是3秒）
                    }, function () {
                        // parent.layer.closeAll('iframe');
                        let index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                        parent.layer.close(index); //再执行关闭
                        parent.window.location.reload();//刷新页面
                    });
                } else {
                    layer.msg('学生修改失败，请稍后再试！', {
                        icon: 0,
                        time: 1000, //1秒关闭（如果不配置，默认是3秒）
                    }, function () {
                        // parent.layer.closeAll('iframe');
                        let index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                        parent.layer.close(index); //再执行关闭
                    });
                }
            }, "text");
        });

        form.on('select(class)', function (data) {
            console.log('select.class：', this, data);
        });

    });
</script>
<!--配置日期组件-->
<script>
    layui.use('laydate', function (laydate) {

        //全局配置
        laydate.set({
            //trigger: 'focus'
        })


        //格子主题
        laydate.render({
            elem: '#birthday' //指定元素
            //,type: 'datetime'
            , theme: 'grid'
            //,range: true
            , trigger: 'click'
        });

    });
</script>
</body>
</html>